<template>
  <div class="approval-management">
    <div class="header">
      <div class="title-section">
        <h2>审批管理</h2>
        <div class="subtitle">管理和处理各类审批申请</div>
      </div>
      <div class="header-buttons">
        <el-button
          style="background-color: #253963; color: #fff"
          @click="handleCreateApproval"
        >
          <el-icon><Plus /></el-icon>
          <span>发起审批</span>
        </el-button>
      </div>
    </div>

    <!-- 搜索过滤区域 -->
    <el-card class="filter-section">
      <div class="filter-row">
        <div class="filter-item">
          <div class="filter-label">申请日期</div>
          <el-date-picker
            v-model="searchForm.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="YYYY-MM-DD"
          />
        </div>
        <div class="filter-item">
          <div class="filter-label">审批类型</div>
          <el-select v-model="searchForm.type" placeholder="全部类型">
            <el-option
              v-for="item in availableApprovalTypes"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div class="filter-item">
          <div class="filter-label">审批状态</div>
          <el-select v-model="searchForm.status" placeholder="全部状态">
            <el-option
              v-for="item in statusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <el-button
          style="background-color: #253963; color: #fff"
          class="filter-button"
          @click="handleSearch"
        >
          筛选
        </el-button>
      </div>
    </el-card>

    <!-- 审批列表 -->
    <el-card class="approval-table">
      <div class="table-header">
        <div class="table-title">审批列表</div>
      </div>
      <el-table
        :data="
          filteredApprovalList.slice((currentPage - 1) * pageSize, currentPage * pageSize)
        "
        style="width: 100%"
        v-loading="loading"
        border
      >
        <el-table-column type="selection" width="50" />
        <el-table-column label="申请编号" prop="id" width="120" />
        <el-table-column label="申请日期" prop="applyDate" width="120" sortable />
        <el-table-column label="审批类型" prop="type" width="120">
          <template #default="scope">
            <el-tag :type="getApprovalTypeTag(scope.row.type)">
              {{ getApprovalTypeLabel(scope.row.type) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="申请人" prop="applicant" width="120" />
        <el-table-column label="审批状态" prop="status" width="120">
          <template #default="scope">
            <el-tag :type="getStatusTag(scope.row.status)">
              {{ getStatusLabel(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="当前审批人" prop="currentApprover" width="120" />
        <el-table-column
          label="申请事由"
          prop="reason"
          min-width="200"
          show-overflow-tooltip
        />
        <el-table-column label="操作" width="180" fixed="right">
          <template #default="scope">
            <el-button type="primary" link @click="handleView(scope.row)">
              查看
            </el-button>
            <el-button
              v-if="
                scope.row.status === 'pending' &&
                scope.row.currentApprover === currentUser
              "
              type="success"
              link
              @click="handleApprove(scope.row)"
            >
              审批
            </el-button>
            <el-button
              v-if="scope.row.status === 'draft' && scope.row.applicant === currentUser"
              type="danger"
              link
              @click="confirmDelete(scope.row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :total="filteredTotal"
          :page-sizes="[5, 8, 10]"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 审批详情弹框 -->
    <el-dialog
      v-model="detailDialogVisible"
      title="审批详情"
      :width="isMobileView ? '95%' : '800px'"
      :close-on-click-modal="false"
      top="50px"
    >
      <el-descriptions :column="isMobileView ? 1 : 2" border>
        <el-descriptions-item label="申请编号">{{
          currentApproval.id
        }}</el-descriptions-item>
        <el-descriptions-item label="申请日期">{{
          currentApproval.applyDate
        }}</el-descriptions-item>
        <el-descriptions-item label="审批类型">
          <el-tag :type="getApprovalTypeTag(currentApproval.type)">
            {{ getApprovalTypeLabel(currentApproval.type) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="审批状态">
          <el-tag :type="getStatusTag(currentApproval.status)">
            {{ getStatusLabel(currentApproval.status) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="申请人">{{
          currentApproval.applicant
        }}</el-descriptions-item>
        <el-descriptions-item label="当前审批人">{{
          currentApproval.currentApprover
        }}</el-descriptions-item>
        <el-descriptions-item label="申请事由" :span="2">{{
          currentApproval.reason
        }}</el-descriptions-item>
        <el-descriptions-item label="审批流程" :span="2">
          <el-steps :active="currentApproval.progress" finish-status="success">
            <el-step
              v-for="(step, index) in currentApproval.approvalSteps"
              :key="index"
              :title="step.approver"
              :description="step.result || '待审批'"
            />
          </el-steps>
        </el-descriptions-item>
      </el-descriptions>

      <template #footer>
        <span class="dialog-footer" :class="{ 'mobile-dialog-footer': isMobileView }">
          <el-button @click="detailDialogVisible = false">关闭</el-button>
          <el-button
            v-if="
              currentApproval.status === 'pending' &&
              currentApproval.currentApprover === currentUser
            "
            style="background-color: #253963; color: #fff"
            @click="handleApprove(currentApproval)"
          >
            审批
          </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 审批操作弹框 -->
    <el-dialog
      v-model="approveDialogVisible"
      title="审批处理"
      :width="isMobileView ? '95%' : '500px'"
      :close-on-click-modal="false"
      top="50px"
    >
      <el-form
        ref="approveFormRef"
        :model="approveForm"
        :rules="approveRules"
        :label-width="isMobileView ? 'auto' : '100px'"
        :label-position="isMobileView ? 'top' : 'right'"
      >
        <el-form-item label="审批结果" prop="result">
          <el-radio-group v-model="approveForm.result">
            <el-radio-button
              v-for="item in approvalResults"
              :key="item.value"
              :label="item.value"
            >
              {{ item.label }}
            </el-radio-button>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="审批意见" prop="comment">
          <el-input
            v-model="approveForm.comment"
            type="textarea"
            :rows="4"
            :placeholder="getCommentPlaceholder(approveForm.result)"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer" :class="{ 'mobile-dialog-footer': isMobileView }">
          <el-button @click="approveDialogVisible = false">取消</el-button>
          <el-button
            style="background-color: #253963; color: #fff"
            @click="submitApproval"
          >
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 发起审批弹框 -->
    <el-dialog
      v-model="createDialogVisible"
      title="发起审批"
      :width="isMobileView ? '95%' : '600px'"
      :close-on-click-modal="false"
      top="50px"
    >
      <el-form
        ref="createFormRef"
        :model="createForm"
        :rules="createRules"
        :label-width="isMobileView ? 'auto' : '100px'"
        :label-position="isMobileView ? 'top' : 'right'"
      >
        <el-form-item label="审批类型" prop="type">
          <el-select
            v-model="createForm.type"
            placeholder="请选择审批类型"
            style="width: 100%"
          >
            <el-option
              v-for="item in availableApprovalTypes"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="申请日期" prop="applyDate">
          <el-date-picker
            v-model="createForm.applyDate"
            type="date"
            placeholder="选择日期"
            value-format="YYYY-MM-DD"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="申请事由" prop="reason">
          <el-input
            v-model="createForm.reason"
            type="textarea"
            :rows="4"
            placeholder="请输入申请事由"
          />
        </el-form-item>
        <el-form-item label="审批人" prop="approver">
          <el-select
            v-model="createForm.approver"
            placeholder="请选择审批人"
            style="width: 100%"
          >
            <el-option
              v-for="item in approverOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer" :class="{ 'mobile-dialog-footer': isMobileView }">
          <el-button @click="createDialogVisible = false">取消</el-button>
          <el-button style="background-color: #253963; color: #fff" @click="submitCreate">
            提交
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, computed } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { getLiu } from "@/utils/api";
// 接口定义
interface SearchForm {
  dateRange: [string, string] | null;
  type: string;
  status: string;
}

interface ApprovalStep {
  approver: string;
  result?: string;
  comment?: string;
  date?: string;
}

interface ApprovalRecord {
  id: string;
  applyDate: string;
  type: string;
  applicant: string;
  status: string;
  currentApprover: string;
  reason: string;
  progress: number;
  approvalSteps: ApprovalStep[];
}

interface ApproveForm {
  result: "approved" | "rejected";
  comment: string;
}

interface CreateForm {
  type: string;
  applyDate: string;
  reason: string;
  approver: string;
}

const data = localStorage.getItem("data");
console.log(data);

// 解析用户数据并设置用户角色
const getUserRoleFromData = () => {
  if (!data) return "员工"; // 默认为员工角色

  try {
    const userData = JSON.parse(data);
    console.log("解析后的用户数据:", userData);

    // 优先根据department字段判断角色
    if (userData.department === "CEO" || userData.job === "CEO") {
      return "CEO";
    } else if (
      userData.department === "人事部" ||
      userData.department === "HR" ||
      userData.job === "HR" ||
      userData.job === "人事"
    ) {
      return "HR";
    } else if (
      userData.department === "行政部" ||
      userData.department === "ADMIN" ||
      userData.job === "行政" ||
      userData.job === "ADMIN"
    ) {
      return "ADMIN";
    }

    // 其次根据role字段判断
    if (userData.role === "CEO") {
      return "CEO";
    } else if (userData.role === "HR") {
      return "HR";
    } else if (userData.role === "ADMIN" || userData.role === "行政") {
      return "ADMIN";
    }

    // 最后根据用户名判断
    if (userData.username === "ceo" || userData.name === "ceo") {
      return "CEO";
    } else if (userData.username === "admin" || userData.name === "admin") {
      return "ADMIN";
    }

    return "员工"; // 默认为普通员工角色
  } catch (error) {
    console.error("解析用户数据失败:", error);
    return "员工"; // 解析失败默认为普通员工角色
  }
};

// 状态定义
const currentUser = ref("Admin"); // 当前用户，实际应该从用户状态获取
const userRole = ref(getUserRoleFromData()); // 根据localStorage中的数据确定用户角色
const loading = ref(false);
const currentPage = ref(1);
const pageSize = ref(5);
const total = ref(0);
const detailDialogVisible = ref(false);
const approveDialogVisible = ref(false);
const createDialogVisible = ref(false);

const searchForm = ref<SearchForm>({
  dateRange: null,
  type: "",
  status: "",
});

const approvalList = ref<ApprovalRecord[]>([]);
const currentApproval = ref<ApprovalRecord>({
  id: "",
  applyDate: "",
  type: "",
  applicant: "",
  status: "",
  currentApprover: "",
  reason: "",
  progress: 0,
  approvalSteps: [],
});

const approveForm = ref<ApproveForm>({
  result: "approved",
  comment: "",
});

const approveFormRef = ref();
const approveRules = {
  result: [{ required: true, message: "请选择审批结果", trigger: "change" }],
  comment: [{ required: true, message: "请输入审批意见", trigger: "blur" }],
};

const createFormRef = ref();
const createForm = ref<CreateForm>({
  type: "",
  applyDate: new Date().toISOString().split("T")[0],
  reason: "",
  approver: "",
});

const createRules = {
  type: [{ required: true, message: "请选择审批类型", trigger: "change" }],
  applyDate: [{ required: true, message: "请选择申请日期", trigger: "change" }],
  reason: [{ required: true, message: "请输入申请事由", trigger: "blur" }],
  approver: [{ required: true, message: "请选择审批人", trigger: "change" }],
};

// 选项数据
const approvalTypes = [
  { value: "请假申请", label: "请假申请" },
  { value: "报销申请", label: "报销申请" },
  { value: "出差申请", label: "出差申请" },
  { value: "采购申请", label: "采购申请" },
];

const statusOptions = [
  { value: "草稿", label: "草稿" },
  { value: "审批中", label: "审批中" },
  { value: "已通过", label: "已通过" },
  { value: "已拒绝", label: "已拒绝" },
];

const approverOptions = [
  { value: "张三", label: "张三" },
  { value: "李四", label: "李四" },
  { value: "王五", label: "王五" },
  { value: "Admin", label: "Admin" },
];

// 模拟数据
const mockApprovalData: ApprovalRecord[] = [
  {
    id: "AP202403150001",
    applyDate: "2024-03-15",
    type: "请假申请",
    applicant: "张三",
    status: "审批中",
    currentApprover: "Admin",
    reason: "因个人事务请假两天",
    progress: 1,
    approvalSteps: [
      { approver: "李四", result: "已通过", comment: "同意", date: "2024-03-15" },
      { approver: "Admin" },
      { approver: "王五" },
    ],
  },
  {
    id: "AP202403140002",
    applyDate: "2024-03-14",
    type: "报销申请",
    applicant: "李四",
    status: "已通过",
    currentApprover: "已完成",
    reason: "出差交通费报销",
    progress: 3,
    approvalSteps: [
      { approver: "张三", result: "已通过", comment: "费用合理", date: "2024-03-14" },
      { approver: "Admin", result: "已通过", comment: "同意报销", date: "2024-03-14" },
      { approver: "王五", result: "已通过", comment: "通过", date: "2024-03-15" },
    ],
  },
];

// 方法定义
const getApprovalTypeTag = (type: string): string => {
  const typeMap: Record<string, string> = {
    leave: "warning",
    expense: "success",
    business: "info",
    procurement: "danger",
  };
  return typeMap[type] || "";
};

const getApprovalTypeLabel = (type: string): string => {
  const option = approvalTypes.find((item) => item.value === type);
  return option ? option.label : type;
};

const getStatusTag = (status: string): string => {
  const statusMap: Record<string, string> = {
    draft: "info",
    pending: "warning",
    approved: "success",
    rejected: "danger",
  };
  return statusMap[status] || "";
};

const getStatusLabel = (status: string): string => {
  const option = statusOptions.find((item) => item.value === status);
  return option ? option.label : status;
};

const handleSearch = () => {
  currentPage.value = 1;
  fetchApprovalList();
};

const handleCreateApproval = () => {
  createForm.value = {
    type: "",
    applyDate: new Date().toISOString().split("T")[0],
    reason: "",
    approver: "",
  };
  createDialogVisible.value = true;
};

const handleView = (row: ApprovalRecord) => {
  currentApproval.value = { ...row };
  detailDialogVisible.value = true;
};

const handleApprove = (row: ApprovalRecord) => {
  currentApproval.value = { ...row };
  approveForm.value = {
    result: "approved",
    comment: "",
  };
  approveDialogVisible.value = true;
};

const submitApproval = async () => {
  if (!approveFormRef.value) return;

  try {
    await approveFormRef.value.validate();
    loading.value = true;

    // 模拟API调用延迟
    await new Promise((resolve) => setTimeout(resolve, 500));

    // 更新审批状态
    const index = approvalList.value.findIndex(
      (item) => item.id === currentApproval.value.id
    );
    if (index !== -1) {
      const approval = approvalList.value[index];
      const currentStep = approval.approvalSteps.find(
        (step) => step.approver === currentUser.value
      );
      if (currentStep) {
        currentStep.result =
          approveForm.value.result === "approved" ? "已通过" : "已拒绝";
        currentStep.comment = approveForm.value.comment;
        currentStep.date = new Date().toISOString().split("T")[0];
      }

      // 更新进度和状态
      approval.progress++;
      if (approval.progress >= approval.approvalSteps.length) {
        approval.status = "approved";
        approval.currentApprover = "已完成";
      } else if (approveForm.value.result === "rejected") {
        approval.status = "rejected";
        approval.currentApprover = "已拒绝";
      } else {
        approval.currentApprover = approval.approvalSteps[approval.progress].approver;
      }

      approvalList.value[index] = { ...approval };
    }

    ElMessage.success("审批提交成功");
    approveDialogVisible.value = false;
    detailDialogVisible.value = false;
  } catch (error) {
    console.error("表单验证失败:", error);
  } finally {
    loading.value = false;
  }
};

const confirmDelete = async (row: ApprovalRecord) => {
  try {
    await ElMessageBox.confirm("删除后数据将无法恢复，是否确认删除？", "删除确认", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
      draggable: true,
      center: true,
    });
    handleDelete(row);
  } catch {
    // 用户取消删除，不做任何操作
  }
};

const handleDelete = async (row: ApprovalRecord) => {
  loading.value = true;
  try {
    // 模拟API调用延迟
    await new Promise((resolve) => setTimeout(resolve, 500));

    const index = approvalList.value.findIndex((item) => item.id === row.id);
    if (index !== -1) {
      approvalList.value.splice(index, 1);

      // 如果当前页没有数据了，且不是第一页，则跳转到上一页
      if (filteredApprovalList.value.length === 0 && currentPage.value > 1) {
        currentPage.value--;
      }

      ElMessage.success("删除成功");
    }
  } catch (error) {
    ElMessage.error("删除失败");
  } finally {
    loading.value = false;
  }
};

const fetchApprovalList = async () => {
  loading.value = true;
  try {
    // 模拟API调用延迟
    await new Promise((resolve) => setTimeout(resolve, 500));

    // 模拟后端数据
    approvalList.value = [...mockApprovalData];
    total.value = mockApprovalData.length;
  } catch (error) {
    ElMessage.error("获取数据失败");
  } finally {
    loading.value = false;
  }
};

// 监听分页变化
const handleSizeChange = (val: number) => {
  pageSize.value = val;
  fetchApprovalList();
};

const handleCurrentChange = (val: number) => {
  currentPage.value = val;
  fetchApprovalList();
};

const submitCreate = async () => {
  if (!createFormRef.value) return;

  try {
    await createFormRef.value.validate();

    // 验证当前用户角色是否可以创建该类型的审批
    const isValidType = availableApprovalTypes.value.some(
      (type) => type.value === createForm.value.type
    );
    if (!isValidType) {
      ElMessage.error("当前角色无权创建此类型的审批");
      return;
    }

    loading.value = true;

    // 模拟API调用延迟
    await new Promise((resolve) => setTimeout(resolve, 500));

    // 生成审批步骤
    const approvalSteps = [{ approver: createForm.value.approver }];

    // 创建新的审批记录
    const newApproval = {
      id: `AP${new Date().getTime()}`,
      applyDate: createForm.value.applyDate,
      type: createForm.value.type,
      applicant: currentUser.value,
      status: "pending",
      currentApprover: createForm.value.approver,
      reason: createForm.value.reason,
      progress: 0,
      approvalSteps,
    };

    // 添加到列表
    approvalList.value.unshift(newApproval);
    total.value++;

    ElMessage.success("审批发起成功");
    createDialogVisible.value = false;
  } catch (error) {
    console.error("表单验证失败:", error);
  } finally {
    loading.value = false;
  }
};

// 获取最新的用户数据
onMounted(() => {
  const latestData = localStorage.getItem("data");
  if (latestData) {
    try {
      const userData = JSON.parse(latestData);
      // 更新当前用户信息
      if (userData.username || userData.name) {
        currentUser.value = userData.username || userData.name;
      }
      // 更新用户角色
      userRole.value = getUserRoleFromData();
    } catch (error) {
      console.error("解析用户数据失败:", error);
    }
  }

  fetchApprovalList();
  getLiu().then((res) => {
    console.log(res);
  });
});

// 根据用户角色过滤审批类型
const filteredApprovalList = computed(() => {
  if (!approvalList.value || approvalList.value.length === 0) {
    return [];
  }

  // 应用搜索过滤条件
  let filtered = approvalList.value.filter((approval) => {
    // 日期范围过滤
    if (
      searchForm.value.dateRange &&
      searchForm.value.dateRange[0] &&
      searchForm.value.dateRange[1]
    ) {
      const applyDate = new Date(approval.applyDate);
      const startDate = new Date(searchForm.value.dateRange[0]);
      const endDate = new Date(searchForm.value.dateRange[1]);
      endDate.setHours(23, 59, 59, 999); // 设置结束日期为当天的最后一刻

      if (applyDate < startDate || applyDate > endDate) {
        return false;
      }
    }

    // 审批类型过滤
    if (searchForm.value.type && approval.type !== searchForm.value.type) {
      return false;
    }

    // 审批状态过滤
    if (searchForm.value.status && approval.status !== searchForm.value.status) {
      return false;
    }

    return true;
  });

  // 根据用户角色过滤
  return filtered.filter((approval) => {
    // CEO可以看到所有审批
    if (userRole.value === "CEO") {
      return true;
    }
    // HR角色能看到请假申请、出差申请和报销申请
    else if (userRole.value === "HR") {
      return ["请假申请", "出差申请", "报销申请"].includes(approval.type);
    }
    // 行政角色只能看到采购申请
    else if (userRole.value === "ADMIN" || userRole.value === "行政") {
      return ["采购申请"].includes(approval.type);
    }
    // 普通员工只能看到自己的申请
    else {
      return approval.applicant === currentUser.value;
    }
  });
});

// 可选择的审批类型，根据用户角色动态显示
const availableApprovalTypes = computed(() => {
  if (userRole.value === "CEO") {
    return approvalTypes; // CEO可以申请所有类型
  } else if (userRole.value === "HR") {
    return approvalTypes.filter((type) =>
      ["请假申请", "出差申请", "报销申请"].includes(type.value)
    );
  } else if (userRole.value === "ADMIN" || userRole.value === "行政") {
    return approvalTypes.filter((type) => ["采购申请"].includes(type.value));
  } else {
    // 普通员工可以申请所有类型
    return approvalTypes;
  }
});

// 计算过滤后的总数
const filteredTotal = computed(() => {
  return filteredApprovalList.value.length;
});
</script>

<style scoped>
.approval-management {
  padding: 24px;
  background-color: #f5f7fa;
  height: 100%;
  box-sizing: border-box;
  overflow: auto;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: #f5f7fa;
  padding-bottom: 12px;
}

.title-section h2 {
  font-size: 24px;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 8px 0;
}

.subtitle {
  color: #6b7280;
  font-size: 14px;
}

.header-buttons {
  display: flex;
  gap: 12px;
}

.filter-section {
  margin-bottom: 24px;
  position: sticky;
  top: 80px;
  z-index: 1;
}

.filter-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #e5e7eb;
}

.filter-title {
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
}

.filter-content {
  padding: 16px 20px;
}

.filter-row {
  display: flex;
  gap: 24px;
  margin-bottom: 16px;
}

.filter-row:last-child {
  margin-bottom: 0;
}

.filter-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.filter-label {
  color: #4b5563;
  font-size: 14px;
  width: 70px;
}

.filter-button {
  width: 120px;
}

.approval-table {
  margin-bottom: 24px;
  background: #fff;
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #e5e7eb;
}

.table-title {
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
}

.pagination {
  padding: 16px 20px;
  display: flex;
  justify-content: flex-end;
}

:deep(.el-card) {
  border-radius: 8px;
  border: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

:deep(.el-table) {
  border-radius: 8px;
  overflow: hidden;
}

:deep(.el-table__header) {
  background-color: #f9fafb;
}

:deep(.el-tag) {
  border-radius: 4px;
}

:deep(.el-dialog__body) {
  padding: 20px 40px;
}

:deep(.el-descriptions) {
  margin: 20px 0;
}

:deep(.el-descriptions__cell) {
  padding: 16px 24px;
}

:deep(.el-steps) {
  margin-top: 12px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.mobile-dialog-footer {
  display: flex;
  width: 100%;
}

.mobile-dialog-footer .el-button {
  flex: 1;
}

.form-tip {
  font-size: 12px;
  color: #909399;
  margin-top: 4px;
}

:deep(.el-select) {
  width: 100%;
}
</style>
